<template>
    <div class="searchpage" style="display:inline-block">
        <Page
            :total="total"
            :page-size="rows"
            :current="current"
            @on-change="change"
            show-elevator show-total></Page>
    </div>

</template>
<script>
    export default {
        name: 'mypager',

        props: {
            total: {
                type: Number,
                default: 10
            },
            current: {
                type: Number,
                default: 1
            },
            rows: {
                type: Number,
                default: 10
            }
        },
        methods: {
            change(page) {
                //Nuxt直接引用Pager会报错，包一层
                // this.$emit("update:")
                this.$emit('change', page)
            }
        }
    }
</script>
<style>
    .searchpage .ivu-page {
        text-align: right;
    }

    .searchpage .ivu-page .ivu-page-item {
        border-radius: 0;
        background: #FFFFFF;
        border: 1px solid #4285F4;
        color: #4285F4;
    }

    .searchpage .ivu-page .ivu-page-item a {
        color: #4285F4;
        font-size: 14px;
    }

    .searchpage .ivu-page .ivu-page-item-jump-next,
    .searchpage .ivu-page .ivu-page-item-jump-prev,
    .searchpage .ivu-page .ivu-page-next,
    .ivu-page-prev {
        border-radius: 0;
    }

    .searchpage .ivu-page .ivu-page-options-elevator input {
        border-radius: 0;
    }

    .searchpage .ivu-page .ivu-page-total {
        font-size: 12px;
        color: #666;
    }

    .searchpage .ivu-page .ivu-page-item-active {
        background: #4285F4;
    }

    .searchpage .ivu-page .ivu-page-item-active a {
        color: #fff;
    }
</style>
